<template>
  <div class="medical-homepage">
    <!-- 页头 -->
    <header class="header">
      <div class="logo">医疗健康资讯平台</div>
    </header>

    <!-- 特色医疗技术 -->
    <section class="tech-section">
      <div class="section-title">
        <h2>特色医疗技术</h2>
        <a href="#" @click.prevent="goToDetail('tech')" class="more" style="color: black;">查看详情及更多点这里 →</a>
      </div>
      <div class="tech-list" v-if="techList.length">
        <div class="common-item" v-for="tech in techList" :key="tech.techId">
          <h3 class="common-title">{{ tech.techTitle }}</h3>
          <p class="common-desc">{{ formatContent(tech.techContent) }}</p>
        </div>
      </div>
      <div class="empty" v-else>暂无特色医疗技术数据</div>
    </section>

    <!-- 医疗新闻 -->
    <section class="news-section">
      <div class="section-title">
        <h2>最新医疗新闻</h2>
        <a href="#" @click.prevent="goToDetail('news')" class="more" style="color: black;">查看详情及更多点这里 →</a>
      </div>
      <div class="news-list" v-if="newsList.length">
        <div class="common-item" v-for="news in newsList" :key="news.newsId">
          <h3 class="news-title">{{ news.newsTitle }}</h3>
          <p class="common-desc">{{ formatContent(news.newsContent) }}</p>
        </div>
      </div>
      <div class="empty" v-else>暂无医疗新闻数据</div>
    </section>

    <!-- 健康科普文章 -->
    <section class="article-section">
      <div class="section-title">
        <h2>健康科普文章</h2>
        <a href="#" @click.prevent="goToDetail('article')" class="more" style="color: black;">查看详情及更多点这里 →</a>
      </div>
      <div class="article-list" v-if="articleList.length">
        <div class="common-item" v-for="article in articleList" :key="article.articleId">
          <h3 class="common-title">{{ article.articleTitle }}</h3>
          <p class="common-desc">{{ formatContent(article.articleContent) }}</p>
        </div>
      </div>
      <div class="empty" v-else>暂无健康科普文章数据</div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchAllInforTech } from '@/api/inforemation/technology';
import { fetchAllInforNews } from '@/api/inforemation/news';
import { fetchAllInforArticles } from '@/api/inforemation/artcile';
import type { IInforTech } from '@/api/inforemation/technology';
import type { IInforNews } from '@/api/inforemation/news';
import type { IInforArticle } from '@/api/inforemation/artcile';
import { useRouter } from 'vue-router';
import { useUserStore } from "@/stores/modules/user";

// 数据状态
const techList = ref<IInforTech[]>([]);
const newsList = ref<IInforNews[]>([]);
const articleList = ref<IInforArticle[]>([]);
const loading = ref(true);
const router = useRouter();

const goToDetail = (module: string) => {
  router.push({ name: 'InformationDetail', params: { module } });
};

// 格式化内容（截取前100字符）
const formatContent = (content: string) => {
  if (!content) return '';
  return content.length > 100 ? content.slice(0, 100) + '...' : content;
};

// 按发布时间排序并获取前8条数据（排序逻辑保留但不显示时间）
const getLatestItems = <T extends { publishTime?: string }>(items: T[]): T[] => {
  // 复制数组以避免修改原数组
  const sortedItems = [...items];
  
  
  // 按发布时间降序排序（最新的在前）
  sortedItems.sort((a, b) => {
    const timeA = a.publishTime ? new Date(a.publishTime).getTime() : 0;
    const timeB = b.publishTime ? new Date(b.publishTime).getTime() : 0;
    return timeB - timeA; // 降序排列
  });
  
  // 返回前8条数据
  return sortedItems.slice(0, 8);
};

// 获取首页数据
const fetchHomeData = async () => {
  try {
    loading.value = true;
    // 并行请求所有数据
    const [techRes, newsRes, articleRes] = await Promise.all([
      fetchAllInforTech(),
      fetchAllInforNews(),
      fetchAllInforArticles()
    ]);
    
    // 处理数据：排序并只保留最新的8条
    techList.value = getLatestItems(techRes.data || []);
    newsList.value = getLatestItems(newsRes.data || []);
    articleList.value = getLatestItems(articleRes.data || []);
  } catch (error) {
    console.error('获取首页数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 页面挂载时获取数据
onMounted(() => {
  fetchHomeData();
  console.log(useUserStore().userInfo.staff.deptId);
  
});
</script>

<style scoped>
/* 基础样式 */
.medical-homepage {
  font-family: 'Arial', sans-serif;
  color: #333;
  line-height: 1.6;
  background-image: url("@/assets/OIP-C.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* 页头样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #165DFF;
}

.nav {
  display: flex;
  gap: 2rem;
}

.nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav a.active,
.nav a:hover {
  color: #165DFF;
}

/* 通用区块标题样式 */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 5%;
  border-bottom: 2px solid #f5f5f5;
}

.section-title h2 {
  font-size: 1.5rem;
  color: #333;
  position: relative;
}

.section-title h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 40px;
  height: 3px;
  background-color: #165DFF;
}

.more {
  color: #165DFF;
  text-decoration: none;
  font-size: 0.9rem;
}

/* 通用列表项样式（特色医疗技术、医疗新闻、健康科普文章共用） */
.common-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s;
  padding: 1rem;
}

.common-item:hover {
  transform: translateY(-5px);
}

.common-title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem 0;
}

.common-desc {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

/* 特色医疗技术样式 */
.tech-section {
  padding: 2rem 5%;
}

.tech-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 医疗新闻样式 */
.news-section {
  padding: 2rem 5%;
}

.news-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.news-title {
  font-size: 1.2rem;
  color: #333;
  margin: 0 0 0.8rem;
}

.news-desc {
  margin: 0 0 0.8rem;
  color: #666;
  font-size: 0.95rem;
}

/* 健康科普文章样式 */
.article-section {
  padding: 2rem 5%;
}

.article-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-meta {
  display: flex;
  justify-content: flex-end;
  font-size: 0.85rem;
  color: #999;
}

.article-meta .active {
  color: #165DFF;
}

/* 空状态样式 */
.empty {
  text-align: center;
  padding: 3rem 0;
  color: #999;
  background-color: #fff;
  border-radius: 8px;
}
</style>